<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Zero Defect</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../static/css/dashboard.css" rel="stylesheet"/>
    <link href="../static/css/sticky-footer-navbar.css" rel="stylesheet"/>
    <style type="text/css" rel="stylesheet">
        .attach-img {
            max-width: 160px;
            max-height: 100px;
            margin: 2px;
        }

        #paste-img {
            background-color: #f4ffe8;
        }

        .footer {
            width: 75%;
        }

        .sidebar {
            top: 50px;
        }

        .cell {
            padding: 5px;
            border-radius: 5px;
            color: #ffffff;
            letter-spacing: 2px;
        }
        .rank1 {
             background-color: #59d463;
         }
        .rank2 {
            background-color: #339ce4;
        }
        .rank3 {
            background-color: #ffcf39;
        }
        .rank4 {
            background-color: #ff7f16;
        }
        .rank5 {
            background-color: #ff381a;
        }
        .comment-item {
            margin: 10px;
        }
        .comment-item img{
            width: 30px;
            height: 30px;
        }
        .comment-item p {
            color: #555555;
            font-weight: bold;
            font-size: 15px;
            margin: 10px;
        }
        section div {
            padding: 5px;
        }
        .content {
            line-height: normal;
        }
        .limit-height {
            max-height: 86px;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            border-top: solid 1px #ffffff;
            line-height: normal;
        }
        .limit-width {
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .limit-width:hover {
            position: fixed;
            max-width: 600px;
            width: 600px;
            background-color: #CCCCCC;
            text-overflow:inherit;
            white-space: normal;
            overflow:visible;
        }
    </style>
    <script src="../static/js/lib/jquery.min.js"></script>
    <script src="../static/js/lib/bootstrap.min.js"></script>
    <script src="../static/js/lib/163-angular.min.js"></script>
    <script src="../static/js/app.js"></script>
    <script src="../static/js/defect.js"></script>
    <script src="../static/js/paste.js"></script>
    <script src="../static/js/idService.js"></script>
    <script src="../static/js/commonService.js"></script>
    <script type="application/javascript">
        function imgDetail(img) {
            $("#imgDetail").attr("src", $(img).attr("src"));
            $(".modal-content").css("width", img.naturalWidth + 30);
            $(".modal-dialog").css("margin", "20px auto");
            // $(".modal-dialog").css("max-width", window.screen.width * 0.8);
            $(".modal-dialog").css("width", img.naturalWidth);
            $(".modal-content").css("margin", "0 auto");
            $("#imgModal").modal("toggle");
        }
    </script>
</head>
<body ng-app="app" ng-controller="defectCtrl">
<!-- 导航 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header brand">
        <a class="navbar-brand" href="#">Zero Defect</a>
    </div>
    <div class="container">
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active dropdown" ng-if="isDeveloper || isRequire || isTester">
                    <a href="#" clasks="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">当前工作<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">当前工作</li>
                        <li><a href="/defect">待办工作</a></li>
                        <li><a href="#" ng-click="toAdd()">提出问题</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">历史工作</li>
                        <li><a href="#" ng-click="toMyStarted()">我提出的问题</a></li>
                        <li><a href="#" ng-click="toMyResolved()">我解决的问题</a></li>
                    </ul>
                </li>
                <li><a href="/user" ng-if="isManager">系统管理</a></li>
                <li><a href="/project" ng-if="isDeveloper || isRequire || isTester">项目管理</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">{{principle.firstName}} ({{principle.id}}) <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">设置</a></li>
                        <li><a href="/exit">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- 内容 -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="#">待办工作</a></li>
                <li><a href="#" ng-click="toAdd()">提出问题</a></li>
                <li class="nav-divider"></li>
                <li><a href="#" ng-click="toMyStarted()">我提出的问题</a></li>
                <li><a href="#" ng-click="toMyResolved()">我解决的问题</a></li>
                <li class="nav-divider"></li>
            </ul>
            <ul class="nav nav-sidebar" ng-if="isTodo" ng-init="getTodoTask()">
                <li>
                    <a class="text-danger"><h4>待办工作</h4></a>
                </li>
                <li class="limit-height" ng-repeat="task in todoTaskList" ng-click="taskDetail(task)">
                    <a href="#">
                        <span class="cell rank{{task.rank}}">{{task.rank | reverse}}</span> {{task.code}} ({{task.taskName}})<br/>
                        <b>{{task.content}}</b>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 main">
            <section class="col-sm-10" ng-if="isDetail">
                <h2 class="sub-header">工作详情</h2>
                <input id="detailTaskId" ng-model="defect.taskId" type="text" style="display:none"/>
                <div class="text-primary">
                    <h4>
                        <span class="cell rank{{defect.rank}}">{{defect.rank | reverse}}</span> {{defect.code}} - {{defect.taskName}}
                    </h4>
                    <div>
                        <h3 class="content"><span ng-repeat="item in defect.contentItems">{{item}}<br/></span></h3>
                    </div>
                    <div>
                        <img class="attach-img" ng-repeat="attach in defect.attachmentList" src="{{attach}}" onclick="imgDetail(this)" data-target="#imgModal"/>
                    </div>
                </div>
                <div class="form-horizontal" ng-if="!canRevise">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <button class="btn btn-success pull-right" ng-click="doTask(defect.taskId, true)">解决问题</button>
                        </div>
                        <div class="col-sm-2">
                            <button class="btn btn-warning pull-left" ng-click="doTask(defect.taskId, false)">要求修改</button>
                        </div>
                        <div class="col-sm-3 col-sm-offset-3">
                            <select ng-model="defect.assignee" class="form-control pull-right" ng-options="dev.userId as dev.name for dev in devList">
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <button class="btn btn-info pull-left" ng-click="setAssignee()">分配处理人</button>
                        </div>
                    </div>
                </div>
                <div ng-if="canRevise">
                    <button class="btn btn-info" ng-click="toRevise()">修改问题</button>
                </div>
                <div>
                    <input type="text" class="attachedImg" style="display:none"/>
                    <div>
                        <div class="paste-img">
                            <div>
                                在此处粘贴附件图片（自动上传）...
                            </div>
                        </div>
                    </div>
                    <div>
                        <label>
                            <input type="file" accept="image/*" file-model="images"
                                   onchange="angular.element(this).scope().img_upload(this.files)"/>
                        </label>
                    </div>
                </div>

                <div class="text-info">
                    <div>
                        <textarea class="form-control" placeholder="添加附件和评论" rows="6" ng-model="comment"></textarea>
                        <br/>
                        <button class="btn btn-primary" ng-click="addComment(defect.taskId, comment)">评论</button>
                    </div>
                    <h4>评论列表：</h4>
                    <div ng-repeat="comment in defect.commentList" class="comment-item">
                        <img ng-src="{{defaultImg}}" class="img-circle"/>
                        <span> {{comment.userId}} </span>
                        <span class="pull-right">{{comment.time | date : "yyyy-MM-dd HH:mm:ss"}}</span>
                        <p>{{comment.message}}</p>
                    </div>
                </div>
                <div class="text-info">
                    <h4>流程示意图：</h4>
                    <div>
                        <img src="/graph/task/{{defect.taskId}}"/>
                    </div>
                </div>
            </section>

            <section class="col-sm-10" ng-if="isAdd">
                <h2 class="sub-header">提出问题</h2>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">项目名称：</label>
                        <div class="col-sm-7">
                            <select ng-model="defect.projectId" class="form-control" ng-options="pro.code as pro.name for pro in proList">
                                <!--<option value="{{preferPro.code}}" selected="selected">{{preferPro.name}}</option>-->
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">紧急程度：</label>
                        <div class="col-sm-7">
                            <label class="radio-inline">
                                <input type="radio" ng-model="defect.rank" value="1"/><b> 一般</b>
                            </label>
                            <label class="radio-inline text-info">
                                <input type="radio" ng-model="defect.rank" value="2"/><b> 普通</b>
                            </label>
                            <label class="radio-inline text-primary">
                                <input type="radio" ng-model="defect.rank" value="3"/><b> 重要</b>
                            </label>
                            <label class="radio-inline text-warning">
                                <input type="radio" ng-model="defect.rank" value="4"/><b> 紧急</b>
                            </label>
                            <label class="radio-inline text-danger">
                                <input type="radio" ng-model="defect.rank" value="5"/><b> 非常紧急</b>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题描述：</label>
                        <div class="col-sm-7">
                            <textarea id="defectContent" ng-model="defect.content" class="form-control" rows="10"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">附件：</label>
                        <div class="col-sm-7">
                            <input type="text" class="attachedImg" style="display:none"/>
                            <div>
                                <div class="paste-img">
                                    <div>
                                        在此处粘贴附件图片（自动上传）...
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label>
                                    <input type="file" id="one-input" accept="image/*" file-model="images"
                                           onchange="angular.element(this).scope().img_upload(this.files)"/>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-7">
                            <button ng-click="addDefect()" class="btn btn-primary">确认</button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="col-sm-10" ng-if="isRevise">
                <h2 class="sub-header">修改问题</h2>
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">项目名称：</label>
                        <div class="col-sm-7">
                            <input ng-model="defect.projectId" class="form-control" disabled="disabled"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">紧急程度：</label>
                        <div class="col-sm-7">
                            <label class="radio-inline">
                                <input type="radio" ng-model="defect.rank" value="1"/><b> 一般</b>
                            </label>
                            <label class="radio-inline text-info">
                                <input type="radio" ng-model="defect.rank" value="2"/><b> 普通</b>
                            </label>
                            <label class="radio-inline text-primary">
                                <input type="radio" ng-model="defect.rank" value="3"/><b> 重要</b>
                            </label>
                            <label class="radio-inline text-warning">
                                <input type="radio" ng-model="defect.rank" value="4"/><b> 紧急</b>
                            </label>
                            <label class="radio-inline text-danger">
                                <input type="radio" ng-model="defect.rank" value="5"/><b> 非常紧急</b>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">问题描述：</label>
                        <div class="col-sm-7">
                            <textarea ng-model="defect.content" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                        <!--<label class="col-sm-2 control-label">附件：</label>-->
                        <!--<div class="col-sm-7">-->
                            <!--<input ng-model="defect.attachmentList[0]" class="form-control"/>-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-7">
                            <button ng-click="editDefect(false)" class="btn btn-primary">确认</button>
                            <button ng-click="editDefect(true)" class="btn btn-danger">关闭问题</button>
                        </div>
                    </div>
                </div>
            </section>

            <section ng-if="isMyStarted" ng-init="myStarted()">
                <h2 class="sub-header">我提出的问题</h2>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>等级</th>
                            <th>项目</th>
                            <th>内容</th>
                            <th>是否解决</th>
                            <th>处理人</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="defect in startedList">
                            <td>{{defect.code}}</td>
                            <td>{{defect.rank | reverse}}</td>
                            <td>{{defect.projectId}}</td>
                            <td class="limit-width">{{defect.content}}</td>
                            <td>{{defect.finished ? "是" : "否"}}</td>
                            <td>{{defect.assignee}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section ng-if="isMyResolved" ng-init="myResolved()">
                <h2 class="sub-header">我解决的问题</h2>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>等级</th>
                            <th>项目</th>
                            <th>内容</th>
                            <th>是否解决</th>
                            <th>处理人</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="defect in resolvedList">
                            <td>{{defect.code}}</td>
                            <td>{{defect.rank | reverse}}</td>
                            <td>{{defect.projectId}}</td>
                            <td class="limit-width">{{defect.content}}</td>
                            <td>{{defect.finished ? "是" : "否"}}</td>
                            <td>{{defect.assignee}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
                <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>-->
                <!--</button>-->
                <!--<h4 class="modal-title" id="myModalLabel">附件详情</h4>-->
            <!--</div>-->
            <!--<div class="modal-body">-->
                <!--<div>-->
                    <img id="imgDetail" src=""/>
                <!--</div>-->
            <!--</div>-->
            <!--<div class="modal-footer">-->
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
            <!--</div>-->
        <!--</div>-->
    </div>
</div>

<!-- 页脚 -->
<footer class="footer col-sm-offset-3 col-sm-9">
    <div class="container col-sm-9">
        <p class="text-muted">Zero Defect. 版权所有 2018.02.04</p>
    </div>
</footer>


</body>
</html>